/*
 * 重置密码的表单
 * @Author: ljb
 * @Date: 2018-04-19 14:10:29
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-06-27 18:23:56
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
		.login-content {
			width: 1100px;
			height: 600px;
			margin: 0;
			box-shadow: 0px 0px 10px 1px #cecece;
			display: flex;
			justify-content: center;
			border-radius: 0;
			.login-box {
				background: #fff;
				position: relative;
				width: 500px;
				height: 600px;
				padding: 20px 50px;
				.login-header {
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin-bottom: 15px;
					span {
						height: 1px;
						width:107px;
						background:#2D8CF0;
					}
					h1 {
						line-height: 100px;
						text-align: center;
						letter-spacing: 3px;
						font-size: 24px;
						color: #2D8CF0;
					}
				}
				/*重新登录*/
				.go-login {
					font-size: 14px;
					color: #999999;
					text-align: right;
					padding-right: 12px;
					span {
						color:#2D8DF0;
						cursor: pointer;
					}
				}
				/*重新登录 END*/
				/*重置密码*/
				.firstPassword, .secondPassword {
					padding: 0 10px;
					margin: 40px 0;
					span {
						color: #B3D8FF;
						font-size: 12px;
						margin-left: 5px;
					}
					/*input输入框样式*/
					input {
						display: block;
						border: none;
						border-bottom: 1px solid #E5E5E5;
						width: 100%;
						outline: none;
						font-size: 14px;
						color: #333;
					}
					p {
						padding: 15px 0;
						color:#999999;
					}
				}
				/*重置密码 END*/
				/*重置密码成功*/
				.resetPass-successful {
					text-align: center;
					padding: 0 30px;
					height: 230px;
					display: flex;
					justify-content: center;
					align-items: center;
					img {
						width: 40px;
						height: 40px;
					}
					p {
						font-size: 14px;
						color: #666;
					}
					div {
						font-size: 14px;
						color: #999;
					}
				}
             /*邮箱申请成功 END*/
				/*表单按钮样式*/
				.form-button {
					text-align: center;
					.ivu-btn-primary {
						height: 45px;
						width: 350px;
						border-radius: 25px;
						font-size: 16px;
						color: #fff;
						margin-top: 30px;
						box-shadow: 0 9px 60px -5px #2d8cf0;;
					}
				}
				/*表单按钮样式 END*/
			}
		}
		.login-load {
			background-color: rgba(0, 0, 0, 0.5);
		}
</style>
<template>
	<div class="reset-box">

		<div class="login-content">
			<div>
				<img
					src="//beauty-mirror.gz.bcebos.com/web_admin/login_bg2.jpg"
					alt="">
			</div>
			<div
				class="login-box">
				<div class="login-header">
					<span/>
					<h1 class="login__title">
						{{ $t('reset_password.reset_password') }}
					</h1>
					<span/>
				</div>
				<div class="go-login">
					{{ $t('login.existing_account') }}
					<span @click="goLogin">{{ $t('login.login_immediately') }}</span>
				</div>
				<Form
					ref="formData"
					:model="form_data"
					:rules="ruleInline"
					@keydown.native.enter.prevent="handleSubmit('formData')">

					<!-- 重置密码 -->
					<i-col
						v-if="viewShow">
						<Form-item
							prop="password"
							class="firstPassword">
							<span>{{ $t('login.new_password') }}</span>
							<input
								v-model="form_data.password"
								:placeholder="$t('login.first_pass')"
								type="password"
								name="first-pass">
						</Form-item>
						<Form-item
							prop="password_confirmation"
							class="secondPassword">
							<span>{{ $t('login.confirm_password') }}</span>
							<input
								v-model="form_data.password_confirmation"
								:placeholder="$t('login.second_pass')"
								type="password"
								name="second-pass">
						</Form-item>
					</i-col>

					<!-- 重置成功 -->
					<Form-item
						v-if="!viewShow"
						prop="password"
						class="resetPass-successful">
						<img
							src="~src/assets/icon/icon-chenggong.png"
							alt="">
						<p>{{ $t('login.reset_password_success') }}</p>
						<div>{{ $t('login.reset_tips') }}</div>
					</Form-item>

					<Form-item
						class="form-button">
						<Button
							type="primary"
							long
							@click="handleSubmit('formData')">
							{{ viewShow ? $t('login.complete') : $t('login.login_panx_admin') }}
						</Button>
					</Form-item>
				</Form>

				<Spin
					v-if="login_loading"
					fix
					class="login-load">
					<Icon
						type="load-c"
						size="18"
						class="demo-spin-icon-load" />
					<div>
						{{ $t('login.please_wait') }}
					</div>
				</Spin>
			</div>

		</div>

		<!-- <Form
			ref="formData"
			:model="form_data"
			:rules="ruleInline" >
			<Form-item prop="password">
				<i-input
					v-model="form_data.password"
					:placeholder="$t('reset_password.please_enter_password')"
					type="password"
					size="large"
					@on-enter="handleSubmit('formData')">
					<Icon
						slot="prepend"
						type="ios-locked-outline"/>
				</i-input>
			</Form-item>
			<Form-item prop="password_confirmation">
				<i-input
					v-model="form_data.password_confirmation"
					:placeholder="$t('reset_password.confirm_password')"
					type="password"
					size="large"
					@on-enter="handleSubmit('formData')">
					<Icon
						slot="prepend"
						type="ios-locked-outline"/>
				</i-input>
			</Form-item>
			<Form-item>
				<Button
					type="primary"
					long
					@click="handleSubmit('formData')">{{ $t('reset_password.confirm') }}</Button>
			</Form-item>
		</Form> -->
	</div>
</template>

<script>

import { validatePassCheck } from 'src/validate';

export default {
	name: 'ResetPasswordCreate',
	props: {
		viewShow: {
			type: Boolean,
			default() {
				return false;
			},
		},
		permissionType: {
			type: String,
			default() {
				return '';
			},
		},
	},
	data() {
		return {

			login_loading: false,

			form_data: {
				password: '',
				password_confirmation: '',
			},

			ruleInline: { // 表单验证规则
				password: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('reset_password.password') }),
						trigger: 'blur,change',
					},
					{
						type: 'string',
						min: 6,
						message: this.$t('validate.min', { field: this.$t('reset_password.password'), length: 6 }),
						trigger: 'blur,change',
					},
				],
				password_confirmation: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('reset_password.password') }),
						trigger: 'blur,change',
					},
					{
						validator: validatePassCheck,
						trigger: 'blur,change',
						pwd_info: this,
					},
				],
			},
		};
	},
	methods: {

		/**
		 * 跳到立即登录
		 * @return {undefined} {description}
		 */
		goLogin() {
			switch (this.permissionType) {
			case 'customer':
				this.$router.push({
					path: '/cust-login',
				});
				break;
			case 'store':
				this.$router.push({
					path: '/store-login',
				});
				break;
			default:
				this.$router.push({
					path: '/login',
				});
				break;
			}
		},

		/**
		 * 提交表单的方法
		 * @param  {String} name {表单ref的值}
		 * @return {undefined} {description}
		 */
		handleSubmit(name) {
			if (this.viewShow) {
				this.$refs[name].validate((valid) => {
					if (valid) {
						this.$emit('post', this.form_data);
					} else {
						this.$Message.error(this.$t('common.invalid_form_data'));
					}
				});
			} else {
				this.login_loading = true;
				setTimeout(() => {
					this.goLogin();
				}, 800);
			}
		},

	},
};
</script>
